<template>
  <div 
    class="user-avatar" 
    :class="{ 'clickable': clickable, [size]: true }" 
    @click="handleClick"
    :style="avatarStyle"
  >
    <img 
      v-if="avatarUrl" 
      :src="avatarUrl" 
      :alt="userName || '用户头像'"
      class="avatar-img"
      @error="handleImageError"
    />
    <div v-else class="avatar-placeholder">
      <el-icon><User /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { User } from '@element-plus/icons-vue'

const props = defineProps({
  size: {
    type: String,
    default: 'medium', // small, medium, large
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  avatar: {
    type: String,
    default: ''
  },
  userName: {
    type: String,
    default: ''
  },
  clickable: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const imageError = ref(false)

// 监听 avatar prop 的变化，重置错误状态
watch(() => props.avatar, (newAvatar, oldAvatar) => {
  if (newAvatar !== oldAvatar && newAvatar) {
    // 当头像URL变化时，重置错误状态，允许重新加载
    imageError.value = false
  }
}, { immediate: true })

// 计算头像URL
const avatarUrl = computed(() => {
  if (imageError.value) return ''
  
  // 优先使用传入的avatar
  if (props.avatar) {
    return props.avatar
  }
  
  // 其次使用localStorage中的头像
  const storedAvatar = localStorage.getItem('userAvatar')
  if (storedAvatar) {
    return storedAvatar
  }
  
  return ''
})

// 计算头像样式
const avatarStyle = computed(() => {
  const sizeMap = {
    small: '24px',
    medium: '40px',
    large: '88px'
  }
  const size = sizeMap[props.size] || '40px'
  
  return {
    width: size,
    height: size,
    minWidth: size,
    minHeight: size,
    maxWidth: size,
    maxHeight: size
  }
})

// 处理图片加载错误
const handleImageError = () => {
  imageError.value = true
}

// 处理点击事件
const handleClick = () => {
  if (props.clickable) {
    emit('click')
  }
}
</script>

<style lang="scss" scoped>
.user-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #f5f7fa !important;
  border: 1px solid #e4e7ed !important;
  box-sizing: border-box !important;
  
  &.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }
  
  .avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  .avatar-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #909399 !important;
    width: 100% !important;
    height: 100% !important;
    
    .el-icon {
      font-size: 60% !important;
    }
  }
  
  // 尺寸变体
  &.small {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    
    .avatar-placeholder .el-icon {
      font-size: 12px !important;
    }
  }
  
  &.medium {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    
    .avatar-placeholder .el-icon {
      font-size: 20px !important;
    }
  }
  
  &.large {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    
    .avatar-placeholder .el-icon {
      font-size: 44px !important;
    }
  }
}
</style> 